<template>
  <div>
    <div class="demo-slider-line">
      <div class="d-title">常规样式</div>
      <div class="slider-box">
        <e-slider
          mark-simple
          :show-stop="false"
          v-model="value1"
          :marks="normalMarks" />
      </div>
    </div>

    <div class="demo-slider-line">
      <div class="d-title">指标为区间</div>
      <div class="slider-box">
        <e-slider
          mark-simple
          v-model="value2"
          range
          :marks="normalMarks" />
      </div>
    </div>

    <div class="demo-slider-line">
      <div class="d-title">禁用样式</div>
      <div class="slider-box">
        <e-slider
          mark-simple
          v-model="value3"
          disabled
          :marks="normalMarks" />
      </div>
      <div class="slider-box">
        <e-slider
          mark-simple
          v-model="value4"
          range
          disabled
          :marks="normalMarks" />
      </div>
    </div>

    <div class="demo-slider-line">
      <div class="d-title">带刻度、计数器样式</div>
      <div class="slider-special-box">
        <div class="content">
          <e-slider
            v-model="value5"
            :max="2000"
            :marks="specialMarks"
            show-input
            input-size="large"
            :tip-format="(val) => `${val} GB`" />
        </div>
        <div class="unit">GB</div>
      </div>
    </div>
  </div>
  <slider-md 
    class="markdown-body">
  </slider-md>
</template>

<script>
import { h }  from 'vue'
import sliderMd from '../../docs/slider.md';
export default {
  components: {
    sliderMd
  },
  data () {
    return {
      value1: 50,
      value2: [25, 65],
      value3: 50,
      value4: [25, 65],
      value5: 500,
      normalMarks: {
        0: '0',
        100: '100'
      },
      specialMarks: {
        0: '0GB',
        500: '500GB',
        1000: '1000GB',
        2000: {
          style: {
            color: '#ff0000',
            transform: 'translateX(-37px)'
          },
          label: h('strong', '2000GB')
        }
      }
    }
  }
}
</script>

<style scoped>
.demo-slider-line .d-title {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color: rgba(98,54,255,1);
}
.demo-slider-line {
  margin-bottom: 50px;
}

.demo-slider-line .slider-box {
  width: 60%;
  margin: 40px auto;
}
.slider-special-box {
  margin: 40px auto;
  text-align: center;
}
.slider-special-box .content {
  width: 60%;
  display: inline-block;
}
.slider-special-box .unit {
  display: inline-block;
  position: relative;
  left: 3px;
  bottom: 18px;
  font-size: 14px;
}
</style>
